<template>
  <div>

    <!--  头部导航栏  -->
    <div>
      <el-menu
          :default-active="this.$route.path"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          router
          background-color="#fff"
          text-color="#333"
          active-text-color="#0084ff"
          style="flex:1"
      >
        <el-menu-item style="padding:0 10px" v-for="(item, i) in navList" :key="i" :index="item.name">
          <template slot="title">
            <span> {{ item.navItem }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>

    <!--  注册表单  -->
    <div>
      <el-form :model="form" :rules="rules" ref="form" label-width="80px" class="login-box">
        <h3>注册</h3>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="repassword">
          <el-input v-model="form.repassword" placeholder="请再次输入密码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="register('form')">注册</el-button>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      aa:'https://element.eleme.io',

      // 导航栏数据
      navList:[
        {name:'/index', navItem:'系统首页'},
        {name:'/advice',navItem:'意见反馈'},
        {name:'/login', navItem:'系统登录'},
        {name:'/register',navItem:'系统注册'}
      ],

      form: {
        email:'',
        userId: '',
        password: '',
        repassword: '',
        uid: '',
        name: '',
        company: '',
        phone: '',
        type: '',
        remark: '',
      },
      rules: {
        userId: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'}
        ],
        repassword: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
      }
    }
  },

  methods: {
      handleSelect(key, keyPath) {
      },

    jump(){
      window.location.assign(this.aa)
    },

    register(){
      this.$router.push({path:'/login'})
    },

  }
}
</script>

<style scoped lang="scss">
.login-box {

  width: 4.5rem;

  margin: 1.5rem auto;

  border: aqua;

  padding: 0.4rem;

  border-radius: 0.1rem;

  box-shadow: 0 0 0.3rem #2c3e50;
}
.el-menu {
  display: flex;
  flex-wrap: nowrap;
}
</style>